<template>
    <div class="container">
      <div class="tips-title">1.基本用法-默认不区分颜色<span class="tips-explain"></span></div>
      <el-rate v-model="value1"></el-rate>
      <div class="tips-title">2.基本用法-区分颜色<span class="tips-explain">:colors=['',...]</span></div>
      <el-rate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
      <div class="tips-title">3.辅助文字<span class="tips-explain">show-text :texts=['',...]</span></div>
      <el-rate v-model="value3" show-text :texts="['不及格','及格','中等','良好','优秀']"></el-rate>
      <div class="tips-title">4.其它 icon<span class="tips-explain">:icon-classes=['',...]，推荐使用Iconfont素材</span></div>
      <el-rate v-model="value4" :icon-classes="iconClasses" void-icon-class="el-icon-medal" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
      <div class="tips-title">5.只读<span class="tips-explain"></span></div>
      <el-rate v-model="value5" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
    </div>
</template>
<script>
  export default {
    name: 'f-rate',
    data() {
      return {
        value1: null,
        value2: null,
        value3: null,
        iconClasses: ['el-icon-medal', 'el-icon-medal', 'el-icon-medal'],
        value4: null,
        value5: 3.7
      }
    }
  }
</script>
<style>

</style>

